<template>
  <el-dialog title="培训档案" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <!-- <el-form-item label="课程讲义">
              <el-upload
                :action="attendance"
                :on-success="handleHandoutSuccess"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :limit="1"
                multiple
              >
                <el-button type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">可上传doc/xls文件</div>
              </el-upload>
      </el-form-item>-->
      <el-form-item label="培训小结" prop>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2}"
          placeholder="请输入内容"
          v-model="dataForm.summary"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="select()" :loading="downloadLoading">查看完整一期一档</el-button>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="loading">确定</el-button>
    </span>

    <el-dialog width="80%" :visible.sync="downLoadVisible" append-to-body>
      <div v-loading="recordsLoading">
        <div>
          <div class="title">{{wordData.mktitle}}</div>
          <div class="title">"{{wordData.trainTitle}}"安全培训档案</div>
          <div class="serial">编号：{{wordData.trainNumber}}</div>
        </div>
        <div>
          <div class="sub-title">一、培训计划</div>
          <div style="margin-left:30px;line-height:30px;margin-top:10px;">
            <div>1.培训目的：{{wordData.trainObjective}}</div>
            <div>2.培训时间：{{wordData.trainStartTime}} 至 {{wordData.trainEndTime}}</div>
            <div>3.培训地点：{{wordData.trainPlace}}</div>
            <div>4.培训安排：{{wordData.trainPlan}}</div>
            <!--<div>5.课程讲义：</div>-->
          </div>
          <div class="sub-title">二、学员名册</div>
          <div>
            <div class="table-title">{{wordData.mktitle}}"{{wordData.trainTitle}}"安全培训报名表</div>
            <el-table :data="wordData.userList" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="realname" label="姓名"></el-table-column>
              <el-table-column label="性别">
                <template slot-scope="scope">
                  <span>{{scope.row.gender === 1?'男':'女'}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="deptName" label="部门"></el-table-column>
              <el-table-column label="岗位/工种">
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.workTypes" :key="index">
                    <span>{{item}}</span>
                    <span v-if="index<scope.row.workTypes.length-1">/</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="mobile" label="电话"></el-table-column>
              <el-table-column prop="remark" label="备注"></el-table-column>
            </el-table>
          </div>
          <div class="sub-title">三、学员考勤</div>
          <div>
            <div class="table-title">{{wordData.mktitle}}"{{wordData.trainTitle}}"安全培训考勤表</div>
            <div v-for="(item,index) in wordData.sheetGroupList" :key="index">
              <div
                style="display:flex;justify-content: space-between;line-height:30px;margin-top:10px;"
              >
                <span>主讲人：{{item.teacher}}</span>
                <span>时间：{{item.sheetTime}}</span>
              </div>
              <el-table :data="item.trainAttendanceSheetEntities" border>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="realname" label="姓名"></el-table-column>
                <el-table-column label="上午签到">
                  <template slot-scope="scope">
                    <span v-if="scope.row.amSignInStatus == -1">未签到</span>
                    <span v-if="scope.row.amSignInStatus == 0">迟到</span>
                    <span v-if="scope.row.amSignInStatus == 1">已签到</span>
                  </template>
                </el-table-column>
                <el-table-column label="上午签退">
                  <template slot-scope="scope">
                    <span v-if="scope.row.amSignOutStatus == -1">未签退</span>
                    <span v-if="scope.row.amSignOutStatus == 0">早退</span>
                    <span v-if="scope.row.amSignOutStatus == 1">已签退</span>
                  </template>
                </el-table-column>
                <el-table-column label="下午签到">
                  <template slot-scope="scope">
                    <span v-if="scope.row.pmSignInStatus == -1">未签到</span>
                    <span v-if="scope.row.pmSignInStatus == 0">迟到</span>
                    <span v-if="scope.row.pmSignInStatus == 1">已签到</span>
                  </template>
                </el-table-column>
                <el-table-column label="下午签退">
                  <template slot-scope="scope">
                    <span v-if="scope.row.pmSignOutStatus == -1">未签退</span>
                    <span v-if="scope.row.pmSignOutStatus == 0">早退</span>
                    <span v-if="scope.row.pmSignOutStatus == 1">已签退</span>
                  </template>
                </el-table-column>
                <el-table-column prop label="备注"></el-table-column>
              </el-table>
            </div>
          </div>
          <div class="sub-title">四、考试成绩</div>
          <div>
            <div class="table-title">{{wordData.mktitle}}"{{wordData.trainTitle}}"安全考试成绩汇总表</div>
            <el-table :data="wordData.examScoreList" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="realname" label="姓名"></el-table-column>
              <el-table-column prop="deptName" label="部门"></el-table-column>
              <el-table-column prop="createTime" label="考试时间"></el-table-column>
              <el-table-column prop="score" label="分数"></el-table-column>
              <el-table-column prop="status" label="是否及格"></el-table-column>
              <el-table-column prop="ranking" label="排名"></el-table-column>
              <el-table-column prop="remark" label="备注"></el-table-column>
            </el-table>
          </div>
          <div class="sub-title">五、学员评价</div>
          <div>
            <div class="table-title">{{wordData.mktitle}}"{{wordData.trainTitle}}"安全培训学员评价汇总</div>
            <el-table :data="wordData.userCommentList" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="realname" label="姓名"></el-table-column>
              <el-table-column prop label="性别">
                <template slot-scope="scope">
                  <span>{{scope.row.gender == 1?'男':'女'}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="deptName" label="部门"></el-table-column>
              <el-table-column label="岗位/工种" width="200">
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.workTypes" :key="index">{{item}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="学生评价" width="300"></el-table-column>
              <el-table-column prop="remark" label="备注"></el-table-column>
            </el-table>
          </div>
          <div class="sub-title">六、老师评价</div>
          <div>
            <div class="table-title">{{wordData.mktitle}}"{{wordData.trainTitle}}"安全培训老师评价汇总</div>
            <el-table :data="wordData.studentCommentList" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="realname" label="姓名"></el-table-column>
              <el-table-column prop label="性别">
                <template slot-scope="scope">
                  <span>{{scope.row.gender == 1?'男':'女'}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="deptName" label="部门"></el-table-column>
              <el-table-column label="岗位/工种" width="200">
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.workTypes" :key="index">{{item}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="evaluate" label="老师评价" width="300"></el-table-column>
              <el-table-column prop="remark" label="备注"></el-table-column>
            </el-table>
          </div>
          <div class="sub-title">七、培训小结</div>
          <div style="margin-left:30px;line-height:30px;margin-top:10px;">{{wordData.trainSummary}}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="downloadWord" type="primary">下载WORD</el-button>
        <!--<el-button @click="downloadPdf" type="primary">下载PDF</el-button>-->
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'

export default {
  data() {
    return {
      visible: false,
      downLoadVisible: false,
      recordsLoading: false,
      dataForm: {
        id: 0,
        trainId: 0,
        planOssId: '',
        handoutOssId: '',
        attendanceOssId: '',
        reportOssId: '',
        sort: '',
        summary: ''
      },
      wordData: {},
      planPath: '',
      handoutPath: '',
      attendancePath: [{ url: '' }],
      reportPath: '',
      fileList: [],
      loading: false,
      downloadLoading: false,
      load: true,
      cateList: [],
      attendance:
        this.$http.adornUrl('/oss/oss/upload?token=') +
        Vue.cookie.get('token') +
        '&client=ADMIN',
      dataListLoading: false,
      trainFileId: 0,
      dataRule: {
        title: [{ required: true, message: '请填写培训目的', trigger: 'blur' }]
      }
    }
  },
  methods: {
    init(id) {
      this.dataForm.trainId = id || 0
      // this.execu()
      this.dataForm.summary = ''
      this.visible = true
      this.fileList = []

      this.$http({
        url: this.$http.adornUrl(`/train/admin/train/gettrainsummary`),
        method: 'post',
        data: {
          trainId: this.dataForm.trainId
        }
      })
        .then(res => {
          this.dataForm.summary = res.data
          this.loading = false
        })
        .catch(err => {
          this.loading = false
          this.$message.warning(err)
        })
    },
    execu() {
      this.$http({
        url: this.$http.adornUrl('/train/trainfile/trainFileIsExistByTrainId'),
        method: 'post',
        data: {
          trainId: this.dataForm.trainId
        }
      }).then(res => {
        this.trainFileId = res.data
        if (this.trainFileId > 0) {
          this.$http({
            url: this.$http.adornUrl(
              `/train/trainfile/info/${this.trainFileId}`
            ),
            method: 'post',
            data: {
              id: this.trainFileId
            }
          }).then(res => {
            this.dataForm.planOssId = res.data.planOssId
            this.dataForm.attendanceOssId = res.data.attendanceOssId
            this.dataForm.handoutOssId = res.data.handoutOssId
            this.dataForm.reportOssId = res.data.reportOssId
            this.planPath = res.data.planPath
            this.attendancePath = [{ url: res.data.attendancePath }]
            this.handoutPath = res.data.handoutPath
            this.reportPath = res.data.reportPath
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$http({
            url: this.$http.adornUrl(`/train/admin/train/trainsummarysave`),
            method: 'post',
            data: {
              trainId: this.dataForm.trainId,
              summary: this.dataForm.summary
            }
          }).then(res => {
            if (res && res.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(res.msg)
            }
            this.loading = false
          })
        }
      })
    },

    // 上传课程讲义
    handleHandoutSuccess(res, file) {
      this.dataForm.handoutOssId = res.data.id
    },

    beforeUpload(file) {
      const isFile = file.type === 'doc/xls/ppt'
      if (!isFile) {
        this.$message.error('上传视频为 doc/xls 格式!')
      }
      return isFile
    },
    handleRemove(file, fileList) {
      this.dataForm.Path = ''
    },
    handleExceed() {
      this.$message.error('限制数量为：1')
    },

    // 查看一期一档
    select() {
      this.downLoadVisible = true
      this.recordsLoading = true
      let data = new FormData()
      data.append('id', this.dataForm.trainId)
      data.append('orgTitle', '盖州')
      data.append('mkTitle', '盖州')
      this.$http({
        url: this.$http.adornUrl(`/train/admin/train/gettrain2worddata`),
        method: 'post',
        data: data
      }).then(res => {
        this.wordData = res.data
        this.recordsLoading = false
      })
    },

    downloadWord() {
      let id = this.dataForm.trainId
      let http = axios.create({
        timeout: 1000 * 30,
        withCredentials: true,
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          token: Vue.cookie.get('token'),
          TENANT_ID: Vue.cookie.get('tenantId'),
          client: 'ADMIN'
        }
      })
      http
        .post(this.$http.adornUrl(`/train/admin/train/train2word/${id}`), {
          responseType: 'blob'
        })
        .then(res => {
          if (parseInt(res.status) === 200) {
            let filename = res.headers.filename
            var blob = new Blob([res.data], {
              type:
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'
            })
            // application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
            var downloadElement = document.createElement('a')
            var href = window.URL.createObjectURL(blob) // 创建下载的链接
            downloadElement.href = href
            downloadElement.download = decodeURI(filename) // 下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() // 点击下载
            document.body.removeChild(downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL(href) // 释放掉blob对象
          }
        })
    },

    downloadPdf() {
      let id = this.dataForm.trainId
      let http = axios.create({
        timeout: 1000 * 30,
        withCredentials: true,
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          token: Vue.cookie.get('token'),
          TENANT_ID: Vue.cookie.get('tenantId')
        }
      })
      http
        .get(this.$http.adornUrl(`/train/export/pdf/${id}`), {
          responseType: 'blob'
        })
        .then(res => {
          if (parseInt(res.status) === 200) {
            let filename = res.headers.filename
            var blob = new Blob([res.data], {
              type: 'application/pdf;charset=utf-8'
            }) // application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
            var downloadElement = document.createElement('a')
            var href = window.URL.createObjectURL(blob) // 创建下载的链接
            downloadElement.href = href
            downloadElement.download = decodeURI(filename) // 下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() // 点击下载
            document.body.removeChild(downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL(href) // 释放掉blob对象
          }
        })
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 24px;
  line-height: 40px;
  font-weight: bold;
  text-align: center;
}

.serial {
  text-align: right;
  line-height: 30px;
}

.sub-title {
  font-size: 16px;
  margin-top: 20px;
}

.table-title {
  text-align: center;
  font-size: 16px;
  line-height: 40px;
}
</style>
